<template>
    <div style="padding-bottom: 50px;">

        <div style="background-color: #fff">
            <div class="detail-nav" onclick="window.history.back()"><img class="detail-nav-left" src="../../assets/img/left.png"></div>

            <div class="summary">
                <img :src="collectionData.img">
                <div class="center" v-if="collectionData.status == 1"><p>已售完</p>
                    <p>SOLD OUT</p>
                </div>
                <div class="center" v-else-if="collectionData.status == 2"><p>待开放</p>
                    <p>TO be open</p>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-6" style="font-size: 24px;font-weight: 600;">{{collectionData.name}}</div>
                        <div class="col-xs-6" style="text-align: right;font-size: 24px;font-weight: 600;">
                            <span style="font-size: 18px;">售价:</span>
                            <span style="color: #C8804F">{{collectionData.price}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <p style="font-size: 20px;font-weight: 600;">此藏品归属人</p>
            <p style="color: gray;font-size: 16px;">{{collectionData.agent_name}}</p>
        </div>

        <div style="background-color: #fff;padding: 10px; margin-top: 10px;" v-html="collectionData.content"></div>

        <div v-show="isShowProtocol" @click="protocol()"
             style="position: fixed;bottom: 50px;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .4)">
            <div style="position: absolute; bottom: 0;background-color: #fff;padding: 20px 0;">
                <p style="text-align: center;font-weight: bold;font-size: 20px;">购买及委托代卖协议</p>
                <p style="padding: 0 10px;color: gray;">
                    {{protocolContent}}</p>
                <div
                    style="border-top: 1px solid #eee;border-bottom: 1px solid #eee;text-align: center;padding: 10px 0;margin-bottom: 10px;">
                    <input id="is_read" type="checkbox" :checked="isAgree" @click="read()"/> <label for="is_read">我已阅读并同意以上协议及条款自愿购买</label>
                </div>
            </div>
        </div>

        <button class="payment" :class="{unagree: !isAgree}" @click="postOrder">立即购买</button>

    </div>
</template>
<script>
    import swal from "sweetalert";

    export default {
        data() {
            return {
                collection_id: '',
                venue_id: '',

                collectionData: {
                    id: 0,
                    img: '',
                    name: '',
                    price: 0.00,
                    status: 0,
                    agent_name: '',
                    content: '',
                },

                protocolContent: '进行了全面的测试。使用一块经过精雕细琢的木板，它与电影中的浮板材料相同，大小一样。由于参加实验的饰演者比原演员要重，所以把浮板的浮力加大百分之十一，调整到理想状态，并制成Rose在电影中穿的相同材料和浮力的救生衣。这时Jack多次尝试爬上并稳定木板，但都失败了。最后他们把救生衣绑在了木板的下面，两人再次爬上木板，庆幸的是他们不再挣扎，并且很稳当，坚持到了63分钟。',

                isShowProtocol: false,
                isAgree: false,
                isRead: false,
            }
        },
        created() {
        },
        mounted() {
            let params = this.$route.params.vcid.split(',');
            this.venue_id = params[0];
            this.collection_id = params[1];
            this.getDetail();
        },
        methods: {
            getDetail() {
                let that = this;
                this.api.getCollectionDetail(this.collection_id).then(res => {
                    if (res.data) {
                        that.collectionData = res.data;
                    }
                })
            },
            protocol() {
                this.isShowProtocol = !this.isShowProtocol;
            },
            read() {
                this.isAgree = !this.isAgree;
            },
            postOrder() {
                if (!this.isAgree) {
                    this.isShowProtocol = true;
                    return;
                }

                // this.api.postOrder(this.venue_id, this.collection_id).then(res => {
                //     if (res.meta.code != '000') {
                //         swal(res.meta.msg);
                //         return;
                //     }
                //     window.location.href = '/order-confirm/' + res.data.order_no
                // });
                window.location.href = '/order-confirm/' + this.venue_id + ',' + this.collection_id;
            },
        },
    }
</script>
<style>

    .detail-nav {
        padding: 20px;
    }

    .detail-nav-left {
        width: 32px;
        padding: 3px;
        border-radius: 50%;
        background-color: gray;
    }

    .summary {
        padding: 10px;
        position: relative;
    }

    .summary img {
        width: 100%;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .summary .center {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -80%);
        color: #fff;
        background-color: rgba(0, 0, 0, .4);
        text-align: center;
        padding-top: 20px;
    }


    .summary .center p {
        margin: 0;
    }

    .payment {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 50px;
        line-height: 50px;
        background-color: rgb(214, 111, 84);
        color: #FAFAFA;
        border: none;
        text-align: center;
    }

    .unagree {
        color: gainsboro;
    }


</style>
